// 用于编译ast语法树


// <div id="app">hello{{msg}}</div>
// ast 语法树{} -- 可以操纵js，css，节点等可看成一个对象      vnode(虚拟节点) -- 只能操纵节点，可看成一个对象

/**<div id="app">hello{{msg}} <h></h> </div>
 * {
 * tag:'div'
 * attrs:[{id:'app'}],
 * children:[{tag:null,text:hello},{tag:'h'}]
 * }
 */

const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z"]*`;  // 标签名称
const qnameCapture = "((?:" + ncname + "\\:)?" + ncname + ")"; // <span :xx>
const startTagOpen = new RegExp(("^<" + qnameCapture)); // 标签开头 捕获标签名
const endTag = new RegExp(("^<\\/" + qnameCapture + "[^>]*>")); // 匹配标签结尾
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; // 匹配属性
const startTagClose = /^\s*(\/?)>/; // 匹配标签结束
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; // {{}}

// 遍历
function parseHtml(html) {
    // <div id="app">hello{{msg}}</div>  // 开始标签  文本  结束标签   将这个HTML标签进行遍历，遍历一个删除一个
    while (html) {   // 当HTML为空结束
        // 判断标签
        let textEnd = html.indexOf('<')  // 0
        if (textEnd == 0) {  // 证明是一个标签
            // （1） 开始标签
            const startTagMatch = parseStartTag()   // 开始标签的内容
        }
        break
    }
    // 匹配开始标签
    function parseStartTag() {
        // 
        const start = html.match(startTagOpen)  // 返回结果，或则是 false
        console.log(start);
        // 创建一个语法树
        let match = {
            tagName: start[1],
            attrs: []
        }
        // 删除开始的标签
        advance(start[0].length)
        // 属性
        // 注意  属性可能存在多个  遍历里面的属性
        let attr  
        let end
        while(!(end = html.match(startTagClose)) && (attr = html.match(attribute))){
            console.log(attr);
            match.attrs.push({name:attr[1],value:attr[3]|| attr[4] || attr[5]})
            advance(attr[0].length)
        }
        if(end){
            console.log(end);
            advance(end[0].length)
            return match
        }
    }
    // 删除已经匹配了的标签
    function advance(n) {
        html = html.substring(n)
        console.log(html);
    }
}
export function compileToFunction(el) {
    console.log(el);
    // 解析模板
    let ast = parseHtml(el)
}